<template>
  <div>
    <div class="cover_box">
      <div class="cover_img">
        <img v-if="selectImg?.url != null" :src="selectImg?.url" alt="" />
        <img v-else :src="cover1" alt="" />
        <div class="cover_img_text">
          <p>{{ realNameVal }}</p>
          <span>{{ remarksVal }}</span>
        </div>
      </div>
      <div class="cover_list">
        <div class="cover_list_item">
          <p>封面列表</p>
          <div v-if="imgList.length > 0" class="cover_list_img">
            <img v-for="(item) in imgList" :key="item.id" :src="item.url" alt="" @click="selectImgClick(item)"
              :class="item.storageId == selectImg?.storageId ? 'active' : ''" />
          </div>
          <div v-else class="cover_list_img">
            <el-empty description="请先去上传封面" />
          </div>
        </div>
      </div>
    </div>
    <div style="float: right;">
      <el-pagination v-show="pageTotal > 1" layout="prev, pager, next" :total="total"
        v-model:current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
        @current-change="handleCurrentChange" />
    </div>


  </div>
</template>

<script setup lang='ts'>
import { knowledgeApiSysPortalImages } from '@/api/enterpriseDoc/coverListApi';

import cover1 from '../../../../assets/images/enterprise/cover11.png';

const imgListDefault: any = ref([
  { name: 'cover1.png', url: cover1 },
]);
const imgList = ref([])
const selectImg: any = ref({});
const queryParams = ref({
  pageNum: 1,
  pageSize: 12,
})
const total = ref(0)
const pageTotal = ref(0)
const props = defineProps<{
  realNameVal: any,//标题  用于显示
  remarksVal: any,//描述   用于显示
  imageUrlVal: any,//封面id
}>()

const addOrEdit = ref("")
const emit = defineEmits(['update:realName', 'update:textVal', 'update:imageUrlVal'])
/**
 * @param type "edit" 编辑 / 'add'或者不传就是新增
 * @param val 编辑的是传过来的本条数据
 */
const openCoverList = async (type?: any, val?: any) => {
  // console.log(val,'val');
  addOrEdit.value = type == 'edit' ? '编辑' : '新增'
  queryParams.value.pageNum = 1
  await getCoverList()
  if (type == 'edit') {
    selectImg.value.url = val.coverUrl
    selectImg.value.storageId = val.imageUrl
  } else {
    if (imgList.value.length != 0) {
      selectImg.value = imgList.value[0]
      emit('update:imageUrlVal', imgList.value[0].storageId)
    }
  }
}
// 获取封面数据
const getCoverList = async () => {
  await knowledgeApiSysPortalImages({
    page: queryParams.value.pageNum - 1,
    size: queryParams.value.pageSize,
    module: "enterprise",
  }).then((res:any) => {
    // res.rows = []
    imgList.value = res.rows
    // selectImg.value = imgList.value[0]
    total.value = res.total
    pageTotal.value = res.pageSize
  }).catch(err => {
    console.log(err)
  })
}
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getCoverList()
}
const selectImgClick = (item: any) => {
  selectImg.value = item
  emit('update:imageUrlVal', item.storageId)
}
// 判断字段里是否存在http
const isHttp = (url: string) => {
  return /https?:\/\/[^\s/$.?#].[^\s]*/.test(url)
}
defineExpose({
  getCoverList,
  openCoverList
})


</script>
<style scoped lang='scss'>
.cover_box {
  display: flex;

  .cover_img {
    position: relative;
    margin-right: 20px;
    margin-top: 32px;

    img {
      width: 207px;
      height: 300px;
      border-radius: 8px;
    }

    .cover_img_text {
      position: absolute;
      top: 1px;
      padding: 25px;

      p {
        margin: 0;
        color: white;
        font-size: 23px;
        line-height: 30px;
      }

      span {
        color: white;
        font-size: 13px;
      }
    }
  }

  .cover_list {
    width: 310px;

    .cover_list_item {
      p {
        margin: 0;
        font-size: 12px;
      }

      img {
        width: 72px;
        height: 98px;
        border-radius: 8px;
      }

      .cover_list_img {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;

        .active {
          border: 3px solid rgb(20, 86, 240);
        }
      }
    }
  }
}
</style>